<template>
  <view>
    <view
        class="box">

      <view class="title">{{ $i18n.zhToGlobal('我的订单') }}</view>
      <view class="line"></view>
      <view style="height: 10rpx"></view>
      <!-- 待付款、已发货、已收货 -->
      <view class="grid-box-box">
        <view
            v-for="(item, index) in gridList"
            class="grid-box"

        >
          <view class="grid-icon-box">
            <image
                mode="aspectFill"
                class="grid-icon"
                :src="item.icon"></image>
          </view>
          <view class="grid-text">{{ $i18n.zhToGlobal(item.text) }}</view>
        </view>

      </view>

      <view style="height: 20rpx"></view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      gridList: [
        {
          icon: this.$kt.file.byPath('image/daifukuan.svg'),
          text: '待付款'
        },
        {
          icon: this.$kt.file.byPath('image/daifahuo.svg'),
          text: '待发货'
        },
        {
          icon: this.$kt.file.byPath('image/yifahuo.svg'),
          text: '已发货'
        },
        {
          icon: this.$kt.file.byPath('image/yishouhuo.svg'),
          text: '已收货'
        }
      ]
    };
  }
}
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  vertical-align: top;

  width: 100%;
  display: inline-block;
  text-align: left;
  background-color: #FFFFFF;
  border-radius: 20rpx;
}

.grid-box-box{
  display: flex;
  text-align: center;
}

.grid-box {
  vertical-align: top;
  position: relative;
  top: 0;
  width: 100%;
}

.grid-box{
  opacity: .8;
}

.grid-icon {
  width: 60rpx;
  height: 60rpx;

}

.grid-text {
  display: inline-block;
  text-align: center;
  font-size: 28rpx;
  top: 0;
  width: 80%;
}


.title {
  font-size: 32rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-weight: bold;
}

.line {
  width: 100%;
  height: 1rpx;
  background-color: #F0F0F0;
}


</style>
